
        <style>
            .my-drop-zone { border: dotted 3px lightgray; }
            .nv-file-over { border: dotted 3px red; } /* Default class applied to drop zones on over */
            .another-file-over-class { border: dotted 3px green; }
        </style>
<div class="row bounceInRight animated" ng-controller="fileUploadCtrl"  nv-file-drop="" uploader="uploader"  filters="queueLimit, customFilter">
    <div class="col-lg-12 col-xs-12">
      <div class="page-title"><strong>日历</strong></div>
    </div>

    <div class="col-md-3">
        <div  class="x_panel">
            <div class="x_title"><h5><strong>选择文件</strong></h5></div>
            <div class="x_content">
                <div class="minPanel">
                        <!-- 3. nv-file-over uploader="link" over-class="className" -->
                        <div class="well my-drop-zone" nv-file-over="" uploader="uploader">将文件拖拽此处</div>
                            
                        <div nv-file-drop="" uploader="uploader" options="{ url: '/foo' }">
                            <div nv-file-over="" uploader="uploader" over-class="another-file-over-class" class="well my-drop-zone">
                                将文件拖拽此处(设置好)
                            </div>
                        </div>

                        <!-- Example: nv-file-select="" uploader="{Object}" options="{Object}" filters="{String}" -->
                        多个文件
                        <input type="file" nv-file-select="" uploader="uploader" multiple  /><br/>

                        单个文件
                        <input type="file" nv-file-select="" uploader="uploader" />
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-9">
        
        <div  class="x_panel">
            <div class="x_title"><h5><strong>上传队列 <small>(队列个数: {{ uploader.queue.length }})</small></strong></h5></div>
            <div class="x_content">
                <div class="minPanel">
                    <table class="table">
                        <thead>
                            <tr>
                                <th width="50%">名称</th>
                                <th ng-show="uploader.isHTML5">大小</th>
                                <th ng-show="uploader.isHTML5">进度</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="item in uploader.queue">
                                <td><strong>{{ item.file.name }}</strong></td>
                                <td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
                                <td ng-show="uploader.isHTML5">
                                    <div class="progress" style="margin-bottom: 0;">
                                        <div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
                                    </div>
                                </td>
                                <td class="text-center">
                                    <span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
                                    <span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
                                    <span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
                                </td>
                                <td nowrap>
                                    <button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
                                        <span class="glyphicon glyphicon-upload"></span> Upload
                                    </button>
                                    <button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
                                        <span class="glyphicon glyphicon-ban-circle"></span> Cancel
                                    </button>
                                    <button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
                                        <span class="glyphicon glyphicon-trash"></span> Remove
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <div>
                        上传进度:
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">
                        <span class="glyphicon glyphicon-upload"></span> 全部上传
                    </button>
                    <button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">
                        <span class="glyphicon glyphicon-ban-circle"></span> 全部取消
                    </button>
                    <button type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">
                        <span class="glyphicon glyphicon-trash"></span> 全部删除
                    </button>
                </div>
            </div>
        </div>

    </div>


</div>
